<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淘宝网 - 淘！我喜欢</title>
		<link rel="stylesheet" href="./css/index.css" />
		<link rel="icon" href="favicon.ico" />
		<base target="_blank" />
	</head>
	<body>
		<!-- 头部信息 -->
		<div id="headMessage" class="layer clearfix">
			<ul class="fl">
				<li>
					<span>中国大陆</span>
					<span class="iconfont arrow">&#xf0308;</span>
				</li>
				<li class="mr7">
					<a href="#" class="login mr7">亲，请登录</a>
					<a href="#">免费注册</a>
				</li>
				<li><a href="#">手机逛淘宝</a></li>
			</ul>
			<ul class="fr">
				<li>
					<a href="#">我的淘宝</a>
					<span class="iconfont">&#xf0308;</span>
				</li>
				<li>
					<span class="iconfont mr5 c4">&#xf0179;</span>
					<a href="#">购物车</a>
					<strong>0</strong>
					<span class="iconfont">&#xf0308;</span>
				</li>
				<li>
					<a href="#">
						<span class="iconfont mr5 store">&#xe621;</span>收藏夹
					</a>
					<span class="iconfont">&#xf0308;</span>
				</li>
				<li><a href="#">商品分类</a></li>
				<li class="line">|</li>
				<li>
					<a href="#">千牛卖家中心</a>
					<span class="iconfont">&#xf0308;</span>
				</li>
				<li>
					<a href="#">联系客服</a>
					<span class="iconfont">&#xf0308;</span>
				</li>
				<li>
					<span class="iconfont c4 mr5">&#xe604;</span>
					<a href="#">网站导航</a>
					<span class="iconfont">&#xf0308;</span>
				</li>
			</ul>
		</div>
		<!-- 头部广告 -->
		<div id="headAd">
			<div class="layer clearfix">
				<a href="#" class="fl go"><img alt="go" src="./images/ad.jpg"></a>
				<ul class="fr">
					<li class="item1">
						<a href="#" class="fr"><img src="./images/ad.jpg"></a>
						<h3><a href="#">电视会场</a></h3>
						<p><a href="#">最高降2000</a></p>
					</li>
					<li class="item2">
						<a href="#" class="fr"><img src="./images/ad.jpg"></a>
						<h3><a href="#">电视会场</a></h3>
						<p><a href="#">最高降2000</a></p>
					</li>
					<li class="item3">
						<a href="#" class="fr"><img src="./images/ad.jpg"></a>
						<h3><a href="#">电视会场</a></h3>
						<p><a href="#">最高降2000</a></p>
					</li>
					<li class="item4">
						<a href="#" class="fr"><img src="./images/ad.jpg"></a>
						<h3><a href="#">电视会场</a></h3>
						<p><a href="#">最高降2000</a></p>
					</li>
					<li class="item5">
						<a href="#" class="fr"><img src="./images/ad.jpg"></a>
						<h3><a href="#">电视会场</a></h3>
						<p><a href="#">最高降2000</a></p>
					</li>
				</ul>
			</div>

		</div>
		<!-- 头部搜索 -->
		<div id="headSearch">
			<div class="clearfix layer">
				<h1 class="fl"><a href="#">淘宝网</a></h1>
				<div class="code fr">
					<span class="iconfont close">&#xe614;</span>
					<span class="c5">手机淘宝</span>
					<img src="./images/qr.png" />
				</div>
				<div class="search">
					<ul class="searchTab clearfix">
						<li class="active">宝贝</li>
						<li>天猫</li>
						<li>店铺</li>
					</ul>
					<div class="searchContent clearfix">
						<form action="#">
							<div class="searchBox fl">
								<input />
								<div class="placeholder">
									<i class="iconfont">&#xe610;</i>
									<span>网红裤腰带 洋气 国际范 9.9包邮</span>
								</div>
								<span class="iconfont camera">&#xe657;</span>
							</div>
							<div class="bt fl">
								<button type="submit">搜索</button>
							</div>
						</form>
					</div>
					<div class="hotKey">
						<a href="#" class="c5">新款连衣裙</a>
						<a href="#">四件套</a>
						<a href="#" class="c5">潮流T恤</a>
						<a href="#">时尚女鞋</a>
						<a href="#" class="c5">短裤</a>
						<a href="#">半身裙</a>
						<a href="#">男士外套</a>
						<a href="#">墙纸</a>
						<a href="#">行车记录仪</a>
						<a href="#">新款男鞋</a>
						<a href="#">耳机</a>
						<a href="#">时尚女包</a>
						<a href="#">沙发</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 导航 -->
		<div id="nav" class="layer clearfix">
			<h2 class="fl">主题市场</h2>
			<ul>
				<li class="size"><a href="#">天猫</a></li>
				<li class="size"><a href="#">聚划算</a></li>
				<li class="size"><a href="#">天猫超市</a></li>
				<li class="line">|</li>
				<li><a href="#">淘抢购</a></li>
				<li><a href="#">电器城</a></li>
				<li><a href="#">司法拍卖</a></li>
				<li><a href="#">淘宝心选</a></li>
				<li><a href="#">兴农脱贫</a></li>
				<li class="line">|</li>
				<li><a href="#">飞猪旅行</a></li>
				<li><a href="#">智能生活</a></li>
				<li><a href="#">苏宁易购</a></li>
			</ul>
		</div>
		<!-- 首屏内容 -->
		<div id="firstScreen" class="layer clearfix">
			<!-- 左边内容 -->
			<div class="firstLeft fl">
				<!-- 侧边导航 -->
				<div class="sideNav fl">
					<ul>
						<li>
							<a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">鞋靴</a> / <a href="#">箱包</a> / <a href="#">配件</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">面料集采</a> / <a href="#">装修</a> / <a href="#">建材</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span class="iconfont fr">&#xe64e;</span>
						</li>
						<li>
							<a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span class="iconfont fr">&#xe64e;</span>
						</li>
					</ul>
				</div>
				<!-- 图片容器1 -->
				<div class="imgBox1 fr">
					<div class="pic fl">
						<div class="img">
							<a href="#"><img src="./images/jpg_q90_.jpg"></a>
						</div>
						<button class="iconfont leftBtn">&#xe64b;</button>
						<button class="iconfont rightBtn">&#xe64e;</button>
						<div class="circle">
							<span class="active"></span><span></span><span></span><span></span><span></span>
						</div>
					</div>
					<div class="ad fr">
						<a href="#"><img src="./images/ad_jpg_.jpg"></a>
					</div>
				</div>
				<!-- 图片容器2 -->
				<div class="imgBox2 fr">
					<div class="pic fl">
						<div class="picTitle">
							<div class="text clearfix">
								<span class="fl bg">理想生活尚天猫</span>
								<span class="fr"><i>1</i>/6</span>
							</div>
							<div class="line">
								<span></span>
							</div>
						</div>
						<div class="img">
							<a href="#"><img src="./images/img2.jpg"></a>
							<a href="#"><img src="./images/img1.jpg"></a>
						</div>
						<button class="iconfont leftBtn">&#xe64b;</button>
						<button class="iconfont rightBtn">&#xe64e;</button>
					</div>
					<div class="ad fr">
						<p class="title">今日特卖</p>
						<a href="#"><img src="./images/rm.jpg"></a>
					</div>
				</div>
				<!-- 淘宝头条 -->
				<!-- <div class="news fr">
					
				</div> -->
			</div>
			<!-- 右边内容 -->
			<div class="firstRight fr">
				<!-- 用户区 -->
				<div class="user">
					<a href="#" class="avatar"><img src="images/ad.jpg"></a>
					<p class="userName">嗨！你好</p>
					<p class="members">
						<a href="#" class="gold">领淘金币抵钱</a>
						<a href="#" class="blub">会员俱乐部</a>
					</p>
					<div class="btn">
						<button class="login">登录</button>
						<button class="register">注册</button>
						<button class="shop">开店</button>
					</div>
				</div>
				<!-- 举报区 -->
				<a href="#" class="tipOff">
					<span>网上有害信息举报专区</span>
					<i class="iconfont">&#xe627;</i>
				</a>
				<!-- 公告区 -->
				<div class="notice">
					<ul class="title">
						<li class="active"><a href="#">公告</a></li>
						<li><a href="#">规则</a></li>
						<li><a href="#">论坛</a></li>
						<li><a href="#">安全</a></li>
						<li><a href="#">公益</a></li>
					</ul>
					<ul class="content clearfix">
						<li class="item1"><a href="#">95公益周阿里、腾讯等六家公司同台联合做公益</a></li>
						<li><a href="#">淘宝造物节之城市秘密</a></li>
						<li><a href="#">聚划算88红包省钱卡</a></li>
					</ul>
				</div>
				<!-- 图标区 -->
				<table class="icon">
					<tr>
						<td class="item1">
							<a href="#">
								<span></span>
								<i>充话费</i>
							</a>
						</td>
						<td class="item2">
							<a href="#">
								<span></span>
								<i>旅行</i>
							</a>
						</td>
						<td class="item3">
							<a href="#">
								<span></span>
								<i>车险</i>
							</a>
						</td>
						<td class="item4">
							<a href="#">
								<span></span>
								<i>游戏</i>
							</a>
						</td>
					</tr>
					<tr>
						<td class="item5">
							<a href="#">
								<span></span>
								<i>彩票</i>
							</a>
						</td>
						<td class="item6">
							<a href="#">
								<span></span>
								<i>电影</i>
							</a>
						</td>
						<td class="item7">
							<a href="#">
								<span></span>
								<i>酒店</i>
							</a>
						</td>
						<td class="item8">
							<a href="#">
								<span></span>
								<i>理财</i>
							</a>
						</td>
					</tr>
				</table>
				<!-- app -->
				<div class="app">
					<div class="title clearfix">
						<h3 class="fl">阿里APP</h3>
						<a href="#" class="fr">更多</a>
					</div>
					<ul class="appIcon">
						<li><a href="#"><img src="images/tb_60x60.png" alt="淘宝" title="淘宝"></a></li>
						<li><a href="#"><img src="images/tm_60x60.png" alt="天猫" title="天猫"></a></li>
						<li><a href="#"><img src="images/zf_60x60.png" alt="支付宝" title="支付宝"></a></li>
						<li><a href="#"><img src="images/dd_60x60.png" alt="钉钉" title="钉钉"></a></li>
						<li><a href="#"><img src="images/txp_60x60.png" alt="淘小铺" title="淘小铺"></a></li>
					</ul>
				</div>
			</div>
		</div>

		<!-- 有好货爱逛街 -->
		<div class="layer clearfix mt10">
			<div class="goods fl">
				<div class="head clearfix">
					<h3 class="fl">
						<img src="images/goodsIcon.png" alt="有好货" />
						<span class="iconfont">&#xe642;</span>
						<i>有品质生活不期而遇</i>
					</h3>
					<a href="#" class="change fr">换一换</a>
				</div>
				<ul class="list">
					<li>
						<a href="#"><img src="./images/goods1.jpg"></a>
						<h4><a href="#">圣罗兰 口红礼盒</a></h4>
						<p class="text"><a href="#">多款色号多种选择，轻松打造出美丽的唇妆。</a></p>
						<a href="#" class="comment"><span class="iconfont">&#xec80;</span><i>8 人说好</i></a>
					</li>
					<li>
						<a href="#"><img src="./images/goods2.jpg"></a>
						<h4><a href="#">大豆家  方头奶奶鞋</a></h4>
						<p class="text"><a href="#">一脚蹬设计，方便日常的穿脱。</a></p>
						<a href="#" class="comment"><span class="iconfont">&#xec80;</span><i>3758 人说好</i></a>
					</li>
					<li>
						<a href="#"><img src="./images/goods3.png"></a>
						<h4><a href="#">孩子早教中，这款早教产品不可少</a></h4>
						<p class="text"><a href="#">不同纹理的小球，适合宝宝小手抓握，同时，可以刺激宝宝手部丰富的神经，对宝宝的感统系统、触感等发育都有着很好的功能。</a></p>
						<a href="#" class="comment"><span class="iconfont">&#xec80;</span><i>47 人说好</i></a>
					</li>
					<li>
						<a href="#"><img src="./images/goods4.jpg"></a>
						<h4><a href="#">佳宝路转角水槽</a></h4>
						<p class="text"><a href="#">304不锈钢，表面光洁坚固耐用。</a></p>
						<a href="#" class="comment"><span class="iconfont">&#xec80;</span><i>121 人说好</i></a>
					</li>
					<li>
						<a href="#"><img src="./images/goods5.jpg"></a>
						<h4><a href="#">Coca-Cola 可乐瓶T恤</a></h4>
						<p class="text"><a href="#">简约的纯色基调，宣扬自由轻松的休闲氛围。</a></p>
						<a href="#" class="comment"><span class="iconfont">&#xec80;</span><i>35 人说好</i></a>
					</li>
					<li>
						<a href="#"><img src="./images/goods6.jpg"></a>
						<h4><a href="#">Bite 唇釉</a></h4>
						<p class="text"><a href="#">简洁的深灰色包装，低调但不凡。</a></p>
						<a href="#" class="comment"><span class="iconfont">&#xec80;</span><i>13 人说好</i></a>
					</li>
				</ul>
			</div>
			<div class="goods fr shopping">
				<div class="head clearfix">
					<h3 class="fl">
						<img src="images/shopIcon.png" alt="爱逛街" />
						<i>献给聪明可爱的你</i>
					</h3>
					<a href="#" class="change fr">换一换</a>
				</div>
				<ul class="list">
					<li>
						<a href="#"><img src="./images/shopping1.png"></a>
						<p class="text"><span class="iconfont">&#xe61d;</span><a href="#">多款色号多种选择，轻松打造出美丽的唇妆。</a></p>
						<a href="#" class="comment"><span><img src="./images/head.jpg"></span><i>时髦挖掘机</i></a>
					</li>
					<li>
						<a href="#"><img src="./images/shopping2.jpg"></a>
						<p class="text"><span class="iconfont">&#xe61d;</span><a href="#">多款色号多种选择，轻松打造出美丽的唇妆。</a></p>
						<a href="#" class="comment"><span><img src="./images/head.jpg"></span><i>时髦挖掘机</i></a>
					</li>
					<li>
						<a href="#"><img src="./images/shopping3.jpg"></a>
						<p class="text"><span class="iconfont">&#xe61d;</span><a href="#">多款色号多种选择，轻松打造出美丽的唇妆。</a></p>
						<a href="#" class="comment"><span><img src="./images/head.jpg"></span><i>时髦挖掘机</i></a>
					</li>
					<li>
						<a href="#"><img src="./images/shopping4.jpg"></a>
						<p class="text"><span class="iconfont">&#xe61d;</span><a href="#">多款色号多种选择，轻松打造出美丽的唇妆。</a></p>
						<a href="#" class="comment"><span><img src="./images/head.jpg"></span><i>时髦挖掘机</i></a>
					</li>
					<li>
						<a href="#"><img src="./images/shopping5.jpg"></a>
						<p class="text"><span class="iconfont">&#xe61d;</span><a href="#">多款色号多种选择，轻松打造出美丽的唇妆。</a></p>
						<a href="#" class="comment"><span><img src="./images/head.jpg"></span><i>时髦挖掘机</i></a>
					</li> 
					<li>
						<a href="#"><img src="./images/shopping6.jpg"></a>
						<p class="text"><span class="iconfont">&#xe61d;</span><a href="#">多款色号多种选择，轻松打造出美丽的唇妆。</a></p>
						<a href="#" class="comment"><span><img src="./images/head.jpg"></span><i>时髦挖掘机</i></a>
					</li> 
				</ul>
			</div>
		</div>
		<!-- 右侧固定定位导航 -->
		<div id="tool">
			<span class="iconfont">&#xe624;</span>
			<div class="toolsBtn">
				<a href="#" class="c4 active">爱逛<br>好货</a>
				<a href="#" class="c5">好店<br>直播</a>
				<a href="#" class="c6">品质<br>特色</a>
				<a href="#" class="c7">实惠<br>热卖</a>
				<a href="#" class="c4">猜你<br>喜欢</a>
				<a href="#" class="item6">反馈</a>
				<a href="#">暴恐<br>举报</a>
			</div>
		</div>
	</body>
</html>
